<template>
  <view class="container">
    <view class="layout">
      <view class="box" v-for="item in pets" :key="item.id">
        <view class="pic">
          <image :src="item.url" mode="widthFix"></image>
        </view>
        <view class="text">@@@</view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref,
    reactive
  } from 'vue'

  // 数据
let pets = ref([]);
  // 方法
  function network(){
    uni.request({
      url:"https://api.thecatapi.com/v1/images/search",
      data:{
        limit:10
      }
    }).then(res=>{
      console.log(res)
      pets.value = res.data
    })
  }
  network()
</script>

<style lang="scss" scoped>
.container{
  .layout{
    padding: 50rpx;
    .box{
      margin-bottom: 50rpx;
      box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08);
      border-radius: 10rpx;
      overflow: hidden;
      padding: 20rpx;
      .pic{
        image{
          width: 100%;
        }
      }
      .text{
        padding: 30rpx;
        
      }
    }
  }
}
</style>